<!--
 * @Description: 
 * @Author: Zhang_xx
 * @Date: 2025-02-17 10:08:06
 * @LastEditors: Zhang_xx
 * @LastEditTime: 2025-02-17 10:57:11
-->
<template>
  <useTables :pageSizes="[50, 100, 150]" :total="state.tableData.length" @getPage="getPage"
    :tableColumns="state.tableColumns" :tableData="state.tableData" :multiple="true" :needNum="true"
    @checkClick="checkClick" @getData="getData">
    <!-- ???????? -->
    <template #roomCode="{ row }">
      <span>{{ row.roomCode }}----123</span>
    </template>
    <template #operate="scope.row" :message="scope.row">
      <el-button @click="checkClick(row)">新增</el-button>
      <el-button>删除</el-button>
    </template>
  </useTables>
</template>

<script setup lang="ts">
import useTables from '../component/useTables.vue';
import { computed, reactive } from 'vue'
// 配置项
const tableColumns = computed(() => {
  return [
    {
      prop: 'roomCode',
      label: '房间编码1',
      width: '',
      align: 'center',
      slot: 'roomCode'
    },
    {
      prop: 'fullRoomName',
      width: '',
      label: '房间编码2',
      align: 'center'
    },
    {
      prop: 'roomName',
      label: '房间编码3',
      width: '',
    },
    {
      prop: 'locationCode',
      label: '房间编码4',
      width: '',
    },
  ]
})
const state = reactive({
  tableColumns,
  tableData: [
    {
      roomCode: '',
      fullRoomName: '今天天气1',
      roomName: '铜锣湾编号1',
      locationCode: '房间地点1'
    },
    {
      roomCode: 'bbbbb',
      fullRoomName: '今天天气2',
      roomName: '铜锣湾编号2',
      locationCode: '房间地点2'
    },
  ]
})
const checkClick = (row:any) => {
  console.log('查看',row)
}
const getData = () => {
  console.log('查看22')
}
const getPage = (p:any) => {
  console.log(p,'1111')
}
</script>